<template>
    <!-- <title-bar></title-bar> -->
    <div class="flex justify-center items-center w-full p-8 flex-shrink-0">
        <div class="search-bar flex relative h-9 w-full max-w-md bg-buttonbg rounded-lg">
            <input class="w-full h-full pr-10 pl-4 bg-buttonbg rounded-lg border-none text-sm font-medium shadow-lg" type="text" placeholder="请输入...">
            <span class="iconify absolute w-5 right-2 top-1/2 transform -translate-y-1/2" data-icon="ri:search-line" data-inline="false"></span>
        </div>
        <div class="user-settings flex justify-end items-center pl-5 flex-shrink-0 ml-auto">
            <img :src="userphoto1" alt="" class="user-img w-8 h-8 flex-shrink-0 rounded-1/2 object-cover">
            <div class="user-name mr-1 ml-3 text-light-900 text-sm <sm:hidden">jinhang</div>
            <span class="iconify w-2.5 flex-shrink-0" data-icon="mdi-light:chevron-down" data-inline="false"></span>
            <div class="notify relative flex items-center">
                <div class="notification w-2 h-2 right-0.25 -top-0.5 rounded-1/2 bg-red-400 absolute border-blue-200"></div>
                <span class="iconify w-5 ml-6 flex-shrink-0" data-icon="iwwa:alarm" data-inline="false"></span>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import TitleBar from "@renderer/components/common/TitleBar.vue";
import userphoto1 from "@renderer/assets/mock/user-photo-1.jpg";

</script>


<style lang="scss" scoped>

</style>